<script lang="ts">
    import { onMount } from 'svelte';
    import Header from '../../components/common/Header.svelte';
    import Footer from '../../components/common/Footer.svelte';

    onMount(() => {
    });
</script>

<Header />
<main>
    <section class="text-center py-20">
        <h1 class="text-4xl font-bold text-gray-800">免费文字<span class="text-green-600">转语音</span></h1>
        <p class="mt-4 text-gray-600">多语言同步翻译朗读<br>支持粤语、闽南语、自定义克隆音色等多种声音转换，真实发音，流畅自然！</p>
        <a class="inline-block mt-8 px-6 py-3 rounded-lg text-white bg-green-500 hover:bg-green-600" href="/audio-synthesis/create">免费体验</a>
        <a class="inline-block mt-8 px-6 py-3 rounded-lg text-white bg-blue-500 hover:bg-blue-600" href="/audio-synthesis/list">列表</a>
    </section>
    <section class="py-20 text-center bg-green-100">
        <h1 class="text-4xl mb-6">快速&高效</h1>
        <div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-16">
            <div class="bg-white p-6 text-left shadow-md rounded-lg">
                <h3 class="text-lg font-bold text-gray-800">一键生成</h3>
                <p class="mt-2 text-gray-600">添加文本后，仅需一键操作即可在线免费文字转语音。</p>
            </div>
            <div class="bg-white p-6 text-left shadow-md rounded-lg">
                <h3 class="text-lg font-bold text-gray-800">快速试听</h3>
                <p class="mt-2 text-gray-600">实时试听AI转换的语音，体验自然且清晰的发音效果。</p>
            </div>
            <div class="bg-white p-6 text-left shadow-md rounded-lg">
                <h3 class="text-lg font-bold text-gray-800">精准翻译</h3>
                <p class="mt-2 text-gray-600">支持多语种智能翻译，涵盖英语、法语、德语、西班牙语等。</p>
            </div>
        </div>
    </section>
    <section class="py-20 text-center">
        <h1 class="text-4xl mb-6">突出优势</h1>
        <div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-12">
            <div class="bg-white p-8 shadow-md rounded-lg">
                <img class="m-auto" src="/image/audio-synthesis/advantage-1.svg" alt="">
                <h3 class="py-2 text-lg font-bold text-gray-800">效率提升</h3>
                <p class="mt-2 text-left text-gray-600">高效智能的配音功能大幅提高工作效率。</p>
            </div>
            <div class="bg-white p-8 shadow-md rounded-lg">
                <img class="m-auto" src="/image/audio-synthesis/advantage-2.svg" alt="">
                <h3 class="py-2 text-lg font-bold text-gray-800">声音一致</h3>
                <p class="mt-2 text-left text-gray-600">确保所有项目中的语音质量保持一致。</p>
            </div>
            <div class="bg-white p-8 shadow-md rounded-lg">
                <img class="m-auto" src="/image/audio-synthesis/advantage-3.svg" alt="">
                <h3 class="py-2 text-lg font-bold text-gray-800">全球化服务</h3>
                <p class="mt-2 text-left text-gray-600">多语种翻译，满足全球用户的需求。</p>
            </div>
            <div class="bg-white p-8 shadow-md rounded-lg">
                <img class="m-auto" src="/image/audio-synthesis/advantage-4.svg" alt="">
                <h3 class="py-2 text-lg font-bold text-gray-800">高性价比</h3>
                <p class="mt-2 text-left text-gray-600">相比传统配音可节省大量成本</p>
            </div>
        </div>
        <button class="mt-8 px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600">免费体验</button>
    </section>
    <section class="py-10 text-center bg-white">
        <h1 class="text-4xl">百万用户的见证，<span class="text-green-600">好评不断</span></h1>
        <div class="container mx-auto">
            <ul class="mt-10 grid grid-cols-2 gap-x-16 gap-y-8 text-left">
                <li class="flex m-4">
                    <img class="rounded-full shadow-2xl shadow-green" src="image/audio-synthesis/comment-avatar-1.png" alt="">
                    <div class="ml-2">
                        <img src="image/audio-synthesis/comment-star.svg" alt="">
                        <div class="my-1">录咖文字转语音在线生成工具真的挺好用的，操作简单、效率高，很适合像我这样的电脑新手。</div>
                        <div class="text-sm text-gray-600">菲姐，短视频博主</div>
                    </div>
                </li>
                <li class="flex m-4">
                    <img class="rounded-full shadow-2xl shadow-green" src="image/audio-synthesis/comment-avatar-2.png" alt="">
                    <div class="ml-2">
                        <img src="image/audio-synthesis/comment-star.svg" alt="">
                        <div class="my-1">输入文字后，它能帮我快速转换成音频，太方便了。现在只需几分钟就可以完成播客制作！</div>
                        <div class="text-sm text-gray-600">余子越，播客博主</div>
                    </div>
                </li>
                <li class="flex m-4">
                    <img class="rounded-full shadow-2xl shadow-green" src="image/audio-synthesis/comment-avatar-3.png" alt="">
                    <div class="ml-2">
                        <img src="image/audio-synthesis/comment-star.svg" alt="">
                        <div class="my-1">现在孩子们对我的课越来越感兴趣了，用不同声音读诗词给同学们听真是太有趣了。</div>
                        <div class="text-sm text-gray-600">张伦旭，教师</div>
                    </div>
                </li>
                <li class="flex m-4">
                    <img class="rounded-full shadow-2xl shadow-green-900" src="image/audio-synthesis/comment-avatar-4.png" alt="">
                    <div class="ml-2">
                        <img src="image/audio-synthesis/comment-star.svg" alt="">
                        <div class="my-1">阅读文本有时感觉疲惫，用AI转语音后，听着就轻松多了，偶尔还能学习其他语言。</div>
                        <div class="text-sm text-gray-600">Sandy，学生</div>
                    </div>
                </li>
            </ul>
        </div>
    </section>
    <section class="py-10 text-center bg-green-100">
        <h1 class="text-4xl mb-6">文字转语音</h1>
        <div class="container mx-auto">
            <p class="text-gray-600">文字转语音，快捷高效，快来免费体验吧！</p>
        </div>
        <button class="mt-8 px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600">免费体验</button>
    </section>
</main>
<Footer />

<style>
    .container {
        width: 1200px;
    }
</style>